import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl } from 'react-intl';
import { MultiColumnList, Button, Checkbox, Modal, TextArea, Icon, Row, Col } from '@folio/stripes/components';
import { stripesConnect } from '@folio/stripes/core';

class MyComponent extends Component {
    static manifest = Object.freeze({
        activityNotify: {
            type: 'okapi',
            accumulate: true,
            path: () => 'party/urgent_notify',

        }
    });

    static propTypes = {
        stripes: PropTypes.shape({
            logger: PropTypes.object
        }).isRequired,
        resources: PropTypes.object,
        mutator: PropTypes.shape({
        activityNotify:PropTypes.shape({
                POST: PropTypes.func.isRequired,
            })
        }).isRequired,
        labelName: PropTypes.object,
        toModel:PropTypes.func,
        intl:PropTypes.object,
        urgentNotifyOpen:PropTypes.boolean,
        closeUrgentNotify:PropTypes.func,
        selected:PropTypes.array,
        list:PropTypes.array,
    };

    constructor(props) {
        super(props);

        this.state = {
            searchForm: {},
            editOpen: false,
            editParams: {},
            ascriptionList: [],
            optionCategoryList: [],
            searchFlag:true,
            isAllChecked: false,
            checkedState: {},
            sendMsgLength:0,
            sendMsg:'',
            selected: [],
            urgentNotifyOpen:false,
            waitOpen:false,
            operator: {}
        };

    }

    render() {
        const { resources, toModel ,intl,activityNotify} = this.props;

        const footer = (
            <div>
                <Button
                    buttonStyle="primary"
                    marginBottom0
                    onClick={() => {
                        const message = this.state.sendMsg;
                        if (!confirm(intl.formatMessage({id:'ui-party.send.confirmation'}))) {
                            return false;
                        }
                        this.setState({ waitOpen:true }, () => {
                            if (message) {
                                const { POST } = this.props.mutator.activityNotify;
                                const selectedArray = this.props.selected;
                                const list =this.props.list

                                const reserveGroup = [];
                                selectedArray.forEach((obj) => {
                                    reserveGroup.push(...filterById(list, obj));
                                });

                                const params = {
                                    reserveGroup,
                                    message,
                                    operator:this.state.operator
                                };

                                delete params.operator.addresses;
                                delete params.operator.preferredContactTypeId;
                                delete params.operator.servicePoints;
                                delete params.operator.curServicePoint;
                                delete params.operator.dateOfBirth;
                                POST(params).then((response) => {
                                    setTimeout(() => {
                                        this.setState({
                                            waitOpen:false
                                        }, () => {
                                            if (response.sendStatus) {
                                                setTimeout(() => {
                                                    alert(response.message);
                                                    this.setState({ urgentNotifyOpen:false, selected:[], isAllChecked:false, checkedState:[] },()=>{
                                                        this.props.closeUrgentNotify()
                                                    });
                                                }, 1000);
                                            } else {
                                                setTimeout(() => { alert(response.message); }, 1000);
                                            }
                                        });
                                    }, 1500);
                                });
                            } else {
                                alert(intl.formatMessage({ id: 'ui-party.please.input' })+intl.formatMessage({id:'ui-party.content'}));
                            }
                        });

                        function filterById(list, id) {
                            return list.filter(a => a.id == id);
                        }
                    }}

                >
                    <FormattedMessage id="ui-party.send" />

                </Button>
            </div>
        );
        return (
            <div>
            <Modal
                dismissible
                closeOnBackgroundClick
                open={this.props.urgentNotifyOpen}

                label={<FormattedMessage id="ui-party.loans.columns.reserve.urgentNotify" />}
                footer={this.state.sendMsgLength !== 0 ? (footer) : ''}
                onClose={() => {
                    if (this.state.sendMsgLength > 0) {
                        if (confirm(intl.formatMessage({ id: 'ui-party.send.message.close.message' }))) {
                            this.setState({
                                urgentNotifyOpen:false,
                                sendMsgLength:0
                            },()=>{
                                this.props.closeUrgentNotify()
                            });
                        }
                    } else {
                        this.setState({
                            urgentNotifyOpen:false,
                            sendMsgLength:0
                        },()=>{
                            this.props.closeUrgentNotify()
                        });
                    }
                }

                }
            >
                <div>
                    <div style={{ fontSize:'1.2rem', marginBottom:'0.8rem' }}>

                        {`${intl.formatMessage({id:'ui-party.send.title.info.one'})}${this.props.selected.length}${intl.formatMessage({id:'ui-party.send.title.info.two'})}`}

                    </div>
                    <div>
                        <div style={{ fontSize:'1.2rem', marginBottom:'0.8rem' }}><FormattedMessage id={"ui-party.send.message.prompt"}/></div>

                        <TextArea
                            maxlength={255}
                            placeholder={intl.formatMessage({ id: 'ui-party.please.input' })}
                            cols={10}
                            style={{ height:180 }}
                            id="sendValue"
                            onChange={(value) => {
                                const sendMsgLength = value.target.value.length;
                                this.setState({ sendMsgLength, sendMsg:value.target.value });
                            }}
                        />
                        <div style={{ fontSize: '1.2rem',
                            color: '#ccc' }}
                        >
                  <span>
                    {`${this.state.sendMsgLength}/255`}

                  </span>

                        </div>
                    </div>
                </div>
            </Modal>
        <Modal open={this.state.waitOpen} label={<FormattedMessage id={"ui-party.party.processing"}/>} id="Wait-Model">
            <Row center="xs">
                <Col xs={3} />
                <Col xs={6}>
                    <Icon
                        icon="spinner-ellipsis"
                        iconPosition="end"
                        large="large"
                    />
                </Col>
                <Col xs={3} />
            </Row>
        </Modal>
            </div>
        );
    }
}



export default injectIntl(stripesConnect(MyComponent));
